<template>
    <div class="countymap-box">
        <baidu-map :max-zoom="12" :min-zoom="10" :center="centers" :zoom="zooms" @ready="handler" :scroll-wheel-zoom="true" :mapStyle="mapStyles" class="bm-view">
            <!--<bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_CIRCLE" :color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>-->
            <!--<bm-boundary :name="boundaryName" :strokeWeights="2" :strokeColor="strokeColors" :fillColor="fillColors" :fillColorOpacity="fillColorOpacitys"></bm-boundary>-->
        </baidu-map>
        <Modal
                v-model="modal"
                :title="modalTitle"
                footer-hide
                width="65%">
            <div style="position: relative;text-align: center;height: 360px">
            </div>
        </Modal>
    </div>
</template>
<script>
//    import 'http://api.map.baidu.com/getscript?v=3.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612'
    export default {
        name:'countymap',
        components: {
        },
        props: {
        },
        data () {
            return {
                modal:false,
                modalTitle:'',
                centers: {lng: '', lat: ''},
                zooms: 11,
//                strokeWeights:2,
//                strokeColors:'#337FD7',
//                fillColors:'#262C8C',
//                fillColorOpacitys:0.4,
                mapStyles:{
                    styleJson: [{
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#044161"
                        }
                    }, {
                        "featureType": "land",
                        "elementType": "all",
                        "stylers": {
                            "color": "#091934"
                        }
                    }, {
                        "featureType": "boundary",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#064f85"
                        }
                    }, {
                        "featureType": "railway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    }, {
                        "featureType": "highway",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981",
                            "visibility": "off"   // 不显示高速公路
                        }
                    }, {
                        "featureType": "highway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#030C66",
                            "lightness": 1
                        }
                    }, {
                        "featureType": "highway",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "arterial",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981",
                            "lightness": -39
                        }
                    }, {
                        "featureType": "arterial",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#00508b"
                        }
                    }, {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "green",
                        "elementType": "all",
                        "stylers": {
                            "color": "#056197",
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "subway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "manmade",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "local",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "arterial",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "boundary",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#029fd4"
                        }
                    }, {
                        "featureType": "building",
                        "elementType": "all",
                        "stylers": {
                            "color": "#1a5787"
                        }
                    }, {
                        "featureType": "label",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "on"
                        }
                    }, {
                        "featureType": "poi",
                        "elementType": "labels.text.fill",
                        "stylers": {
                            "color": "#ffffff"
                        }
                    }, {
                        "featureType": "poi",
                        "elementType": "labels.text.stroke",
                        "stylers": {
                            "color": "#1e1c1c"
                        }
                    }, {
                        "featureType": "administrative",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "on"
                        }
                    },{
                        "featureType": "road",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    }]
                },
                boundaryName:'碧江区',
                boundaryData:{
                    'yj':{sname:'印江苗族土家族自治县',lng:'108.469913',lat:'28.054153',idx:3},
                    'st':{sname:'松桃苗族自治县',lng:'109.205606',lat:'28.167706',idx:2},
                    'bjq':{sname:'碧江区',lng:'109.211582',lat:'27.788704',idx:2},
                    'ws':{sname:'万山区',lng:'109.245528',lat:'27.560579',idx:3},
                    'yp':{sname:'玉屏侗族自治县',lng:'108.912984',lat:'27.24149',idx:2},
                    'jk':{sname:'江口县',lng:'108.830715',lat:'27.733235',idx:1},
                    'sq':{sname:'石阡县',lng:'108.234792',lat:'27.523215',idx:3},
                    'sn':{sname:'思南县',lng:'108.220851',lat:'27.949526',idx:1},
                    'dj':{sname:'德江县',lng:'108.127848',lat:'28.270169',idx:2},
                    'yh':{sname:'沿河土家族自治县',lng:'108.491514',lat:'28.552231',idx:1},
                    'za':{sname:'正安县',lng:'107.464028',lat:'28.567974',idx:2},
                    'rhs':{sname:'仁怀市',lng:'106.439726',lat:'27.78318',idx:1},
                    'zyx':{sname:'镇远县',lng:'108.440027',lat:'27.023673',idx:3},
                    'mjx':{sname:'麻江县',lng:'107.595262',lat:'26.502239',idx:1},
                    'js':{sname:'金沙县',lng:'106.23219',lat:'27.471252',idx:2},
                    'df':{sname:'大方县',lng:'105.615575',lat:'27.155547',idx:1},
                    'lz':{sname:'六枝特区',lng:'105.4886',lat:'26.233475',idx:1},
                },
                points:[{lng: 109.160531, lat: 28.124492,label:'江口县民和镇铁厂小学',id:4},{lng: 109.16743, lat: 28.227914,label:'铜仁三中',id:3}]
            }
        },
        computed: {
        },
        methods: {
            showModal(id){
                alert(id)
            },
            getBoundarys(BMap,map,address) {
//                map.setZoom(12);
//                if (strokeWeight == null) {
//                    strokeWeight = 1;
//                }
                var boundary = new BMap.Boundary();
                var fx = 0;
                var fy = 0;
                boundary.get(address,
                    function(rs) { //获取行政区域
                        var count = rs.boundaries.length; //行政区域的点集合有多少个

                        for (var i = 0; i < count; i++) {
                            var boundariesArray = rs.boundaries[i];
                            var ply = new BMap.Polygon(boundariesArray, {
                                strokeWeight: 3,
                                strokeColor: '#00FDFB',
                                strokeStyle: "solid",
                                fillColor: "#2F02F5",
                                fillColorOpacity: "0.3"
                            }); //建立多边形覆盖物
                            map.addOverlay(ply); //添加覆盖物
//                            var path = ply.getPath();
                            map.setViewport(ply.getPath()); //调整视野
//                            if(address==='石阡县'||address==='江口县'){
//
//                                map.setZoom(map.getZoom()-1);
//                                console.log(map.getZoom());
//                            }else {
                                map.setZoom(map.getZoom());
//                            }
                            map.setViewport(ply.getPath()); //调整视野
//                            if (callback) {
//                                callback();
//                            }
                        }
                    });
            },
            addMarker(pointsArr,n, BMap,map){
                let _this=this;
                for(let i=0;i<pointsArr.length;i++){
                    let point = new BMap.Point(pointsArr[i].lng,pointsArr[i].lat);
                    let myIcon = new BMap.Icon(require("@/assets/images/dot" + n + ".svg"), new BMap.Size(20,20));
                    let marker=new BMap.Marker(point,{icon:myIcon});

//                    marker.addEventListener("click",showName);
//
//                    function showName (e) {
//                        alert('x：'+e.point.lng+' '+'y：'+e.point.lat);
//                    }
                    let labelHtml='<div class="label-box"><div class="label-title">'+pointsArr[i].label+'</div></div>';
                    map.addOverlay(marker);
                    let label = new BMap.Label(labelHtml,{offset:new BMap.Size(10,-10)});
                    label.setStyle({ fontSize : "14px", backgroundColor:"rgba(0,202,249,0)", padding:"4px", border:"1px solid rgba(0,202,249,0)"});

//                    标签添加点击事件，控制弹窗显隐
                    label.addEventListener("click",function (){
                        _this.modal=true;
                        _this.modalTitle=pointsArr[i].label
                    });
                    marker.setLabel(label); //添加标签

                }

                },
            handler ({BMap, map}) {
                let id=this.$route.query.id;//获取区县id
                this.boundaryName=this.boundaryData[id].sname;//设置行政区域
                this.centers={lng:this.boundaryData[id].lng,lat:this.boundaryData[id].lat};//设置中心视图位置

                //this.axios.get(api).then((response) => {
//                    console.log(response.data)
//                })

//                map.panTo(this.centers);
//                this.initMap(BMap, map,this.boundaryName)
                this.getBoundarys(BMap, map,this.boundaryName)
                this.addMarker(this.points,1,BMap,map)
//                console.log(this.boundaryName)
            },
            initData(){
                this.points={}
            }

        },
        mounted () {
//            let id=this.$route.query.id;//获取区县id
//            this.boundaryName=this.boundaryData[id].sname;//设置行政区域
//            this.centers={lng:this.boundaryData[id].lng,lat:this.boundaryData[id].lat};//设置中心视图位置
//            this.initCountyMap()
        },
        created(){
        }
    }

</script>
<style type="text/css">
    .bm-view {
        width: 100%;
        height: 100%;
    }
</style>